<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>产品详情</title>
	<base href="http://localhost/tpshop/"/>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap-theme.min.css">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css">
</head>
<body>
	<div class="container">
		<include file="./Application/Home/View/header.php" />
		<div class="row ">
			<div class="col-md-5">
				<div class="panel panel-default h602">
					<div class="panel-body h450 nrjz">
						<img class="thumbnail imgw400 product_main_img" src="__ROOT__<?=$product['img']?>" data-zoom-image="__ROOT__<?=$product['img']?>"/>
					</div>
					<div class="panel-body nrjz h150">
						<?php foreach ($product_imgs as $pi) {?>
						<div class="pull-left h120 ma-ri5 selectedpic">
							<img class="thumbnail imgw100" src="__ROOT__<?=$pi['url']?>"/>
						</div>
						<?php }?>
					</div>
				</div>
			</div>
			<div class="col-md-7">
				<div class="panel h602 panel-default">
					<div class="panel-body h450">
						<div class="panel-body cowhh80">
							<a class="panel-title" href="<?=U('Home/Product/detail/id/'.$product['id'])?>"><b><?=$product['title']?></b></a>
						</div>
						<div class="panel-body h50">
							<div class="pull-left w15nrpy">价格：</div>
							<div class="text-danger pull-left"><b>¥<?=$product['price']?></b></div>
						</div>
						<div class="panel-body h50">
							<div class="pull-left w15nrpy">商品评分：</div>
							<div class="pull-left text-danger">
							<?php for ($i=0; $i < 5; $i++) {?>
								<?php if ($i < $product['star']) {?>
								<i class="glyphicon glyphicon-star"></i>
								<?php }else{?>
								<i class="glyphicon glyphicon-star-empty"></i>
								<?php }?>
							<?php }?>
							</div>
						</div>
						<div class="panel-body h50">
							<div class="pull-left w15nrpy">运费：</div>
							<div class="pull-left">满99免运费</div>
						</div>
							<form action="<?=U("Home/shopping/addToCart")?>" method="post">
						<div class="panel-body h50">
							<div class="pull-left w15nrpy">购买数量：</div>
							<div class="pull-left">
								<span id="min">-</span>
								<input type="hidden" name="product_id" value="<?=$product['id']?>">
								<input id="num" name="num" type="text" value="1">
								<span id="add">+</span>
							</div>
						</div>
						<div class="panel-body h142">
							<div class="pull-left w15nrpy">送货：</div>
							<div class="pull-left">由仓库全国最近点 发货，并提供售后服务。如有问题咨询在线客服~!<br/>上午08:30前完成下单下午送达,下午下单隔日第二天送达.</div>
						</div>
					</div>
					<div class="panel-body nrjz h150">
						<div class="pull-left h120 bdw">
							<a class="btn btn-danger btn-lg a1dwzx" href="#">立即购买</a>
							<button type="submit" href="#" class="btn btn-danger btn-lg a2dwzx">加入购物车</button>
						</div>
					</div>
							</form>
				</div>
			</div>
		</div>
		<div class="row ">
			<div class="col-md-3">
				<div class="panel panel-default">
					
				</div>
			</div>
			<div class="col-md-9">
				<div class="panel panel-default">
					<div class="panel-body panel-title">
					<h3 class="text-center"><b>商品详情</b></h3>
					</div>
					<div class="panel-body">
						<?=htmlspecialchars_decode($product['content'])?>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="__PUBLIC__/js/jquery-3.1.0.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/js/jquery.elevateZoom-3.0.8.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.selectedpic').mouseover(function(){
				$('.selectedpic').removeClass("hover");
				$(this).addClass('hover');
				var src  = $(this).find('img').attr('src');
				$('.product_main_img').attr('src',src);
				$('.zoomWindowContainer div').css('background-image','url("'+src+'")');
			})
			$('#add').click(
				function() {
					var n=$('#num').val();
					n=parseInt(n)+1;
					if (n>0) {
						$('#num').val(n);
					}
				})
			$('#min').click(
				function() {
					var n=$('#num').val();
					n=parseInt(n)-1;
					if (n>0) {
						$('#num').val(n);
					}
				})
			$('.product_main_img').elevateZoom({
				zoomType: "inner"
			});
		});
	</script>
</body>
</html>